<!--
+----------------------------------------------------------------------
| 友得云客  - 开启房产营销新纪元
+----------------------------------------------------------------------
| Copyright (c) 2019~2023 优得（西安）信息科技有限公司版权所有
+----------------------------------------------------------------------
| Licensed 友得云客不是自由软件 未经允许不可移除相关版权
+----------------------------------------------------------------------
| Author: www.youdeyunke.com
+----------------------------------------------------------------------
-->
<template>
    <div class="post-list-module-box">

        <div class="post-list-index" v-loading="loading">
            <style0 :posts="posts" v-if="styleName === 0"></style0>
            <style1 :posts="posts" v-if="styleName === 1"></style1>
            <style2 :posts="posts" v-if="styleName === 2"></style2>
            <style3 :posts="posts" v-if="styleName === 3"></style3>
            <div class="empty" v-if="posts.length === 0">请从右侧选择添加房源</div>
        </div>
    </div>
</template>

<script>
import { findIndex } from "lodash";
import Style0 from "./Style0";
import Style1 from "./Style1";
import Style2 from "./Style2";
import Style3 from "./Style3";
import { getWeappPostList } from "@/api/post";

export default {
    components: { Style0, Style1, Style2, Style3 },

    data () {
        return {
            loading: false,
            posts: [],
        };
    },
    props: {
        module: { type: Object, default: null },
    },

    watch: {
        "module.items": function (v) {
            this.posts = [];
            this.loadPosts();
        },

        "module.data.tagIds": function (v) {
            this.posts = [];
            this.loadPosts();
        },
        "module.data.albumId": function (v) {
            this.posts = [];
            this.loadPosts();
        },
        "module.data.dataFrom": function (v) {
            this.posts = [];
            this.loadPosts();
        },
        "module.data.pageSize": function (v) {
            this.posts = [];
            this.loadPosts();
        },
    },

    mounted: function () {
        this.loadPosts();
    },

    computed: {
        styleName: function () {
            return this.module.data.styleName || 0;
        },
        postIds: function () {
            // ids
            return [];
        },
    },

    methods: {
        loadPosts: function () {
            var f = this.module.data.dataFrom || "ids";
            if (f == "ids") {
                this.loadPostsFromIds();
                return;
            }
            if (f == "albumId") {
                this.loadPostsFromAlbum();
                return;
            }
            if (f == "tagIds") {
                this.loadPostsFromTags();
                return;
            }
            if (f == "auto") {
                this.loadPostsAuto();
                return
            }
        },

        loadPostsFromTags: function () {
            var ids = this.module.data.tagIds;
            if (!ids) {
                return;
            }
            this.loading = true;
            var query = { tag_ids: ids.join(","), per_page: this.module.data.pageSize };
            getWeappPostList(query).then((resp) => {
                if (resp.status != 0) {
                    return;
                }
                // 按照ids的原先顺序显示
                var posts = resp.data.result;
                this.posts = posts;
                this.loading = false;
            });
        },

        loadPostsAuto: function () {
            this.loading = true;
            var query = { page: 1, per_page: this.module.data.pageSize };
            getWeappPostList(query).then((resp) => {
                if (resp.status != 0) {
                    return;
                }
                // 按照ids的原先顺序显示
                var posts = resp.data.result;
                this.posts = posts;
                this.loading = false;
            });
        },

        loadPostsFromAlbum: function () {
            var aid = this.module.data.albumId;
            if (!aid) {
                return;
            }
            this.loading = true;
            var query = { album_id: aid, per_page: this.module.data.pageSize }
            getWeappPostList(query).then((resp) => {
                if (resp.status != 0) {
                    return;
                }
                // 按照ids的原先顺序显示
                var posts = resp.data.result;
                this.posts = posts;
                this.loading = false;
            });
        },
        loadPostsFromIds: function () {
            var ids = this.module.items || [];
            if (ids.length == 0) {
                return;
            }
            this.loading = true;
            var query = { ids: ids.join(","), per_page: this.module.data.pageSize };
            getWeappPostList(query).then((resp) => {
                if (resp.status != 0) {
                    return;
                }
                // 按照ids的原先顺序显示
                var posts = resp.data.result;
                posts = posts.sort((p1, p2) => {
                    var index1 = findIndex(ids, (it) => it === p1.id);
                    var index2 = findIndex(ids, (it) => it === p2.id);
                    return index1 - index2;
                    console.log("find index is", index1, index2);
                });
                this.posts = posts;
                this.loading = false;
            });
        },
    },
};
</script>

<style scoped>
.post-list-module-box {
    box-sizing: border-box;
    width: 100%;
    margin: 0 auto;
    padding: 0 16px;
}

.post-filters {
    display: flex;
    justify-content: space-around;
    align-items: center;
    color: #333;
    margin: 20px auto;
}

.post-list-index .empty {
    font-size: 24px;
    color: #999;
    text-align: center;
    min-height: 260px;
    background-image: url("~@/assets/images/no-result.png");
    background-size: 200px;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.5;
}
</style>
